Does Jquery and Mootools usually have conflict if both are used on a webpage? [migrated]
Posted
by
Charming Prince
on Pro Webmasters
See other posts from Pro Webmasters
or by Charming Prince
Published on 2011-11-22T11:33:27Z
Indexed on
2011/11/22
18:16 UTC
Read the original article
Hit count: 334
jQuery
I have this website am designing, i tried using mootools 1.31 to animate some of the div boxes when clicked or when the mouse hover rounds it, to shows the content. the thing is that it doesn't seem to work on the webpage, but if i try the same script on a blank webpage it works, am thinking probably it's because i have Jquery 1.52 on the same page and maybe both scripts are conflicting with each other because, if i remove the Jquery, the Mootools works. What should be my option, because i need the Jquery to do some validations for me, so i can't remove it completely.
Here are the codes
<script>
//-vertical
var mySlide = new Fx.Slide('test');
$('slidein').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});
$('slideout').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
$('hide').addEvent('click', function(e){
e = new Event(e);
mySlide.hide();
e.stop();
});
</script>
here's the HTML
<html>
<h3 class="section">Fx.Slide Vertical</h3>
<a id="slideout" href="#">slideout</a> |
<a id="slidein" href="#">slidein</a> | <a id="toggle" href="#">
toggle</a> | <a id="hide" href="#">hide</a>
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mi
nim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div>
Here's the CSS
#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
#test2 {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
Am using the exact same code supplied by Mootools in their own example, if i do this on a blank webpage it works but incorporated into my own webpage, it doesn't, and my own page just have the script tag of the Jquery in the head section of the HTML.
© Pro Webmasters or respective owner
